﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "库存现有量图表";
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>库存现有量图表</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <link href="/libs/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <script src="/libs/scripts/layui-v2.5.6/layui/layui.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #f2f3f5;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        .header-container {
            margin: 30px 0 20px 0;
            padding: 0 40px;
        }

        .search-form {
            display: flex;
            gap: 16px;
            align-items: center;
            margin-bottom: 18px;
        }

            .search-form select, .search-form input {
                height: 36px;
                border: 1px solid #d9d9d9;
                border-radius: 6px;
                padding: 0 12px;
                font-size: 14px;
            }

            .search-form button {
                height: 36px;
                border-radius: 6px;
                border: none;
                padding: 0 22px;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
            }

        .btn-search {
            background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
            color: #fff;
        }

        .btn-reset {
            background: #f5f5f5;
            color: #666;
            border: 1px solid #d9d9d9;
        }

        .stat-cards {
            display: flex;
            gap: 24px;
        }

        .stat-card {
            background: #fff;
            border-radius: 8px;
            padding: 18px 38px;
            font-size: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            min-width: 180px;
            text-align: center;
        }

            .stat-card span {
                font-size: 26px;
                color: #1890ff;
                font-weight: bold;
                display: block;
                margin-top: 6px;
            }

        .main-chart-container {
            display: flex;
            width: 100vw;
            height: 80vh;
            align-items: center;
            justify-content: center;
            background: #f2f3f5;
        }

        .chart-box {
            display: flex;
            width: 90vw;
            height: 70vh;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 16px rgba(0,0,0,0.08);
            padding: 30px 20px;
            gap: 30px;
        }

        #barChart {
            width: 55%;
            height: 100%;
        }

        #pieChart {
            width: 45%;
            height: 100%;
        }

        @@media (max-width: 900px) {
            .chart-box {
                flex-direction: column;
                height: auto;
            }

            #barChart, #pieChart {
                width: 100% !important;
                height: 350px !important;
            }
        }
    </style>
</head>
<body>
    <div class="header-container">
        <div class="stat-cards">
            <div class="stat-card">总库存数量<span id="totalQuantity">0</span></div>
            <div class="stat-card">物料种类<span id="materialTypes">0</span></div>
            <div class="stat-card">仓库数量<span id="warehouseCount">0</span></div>
            <div class="stat-card">7天内即将过期物料<span id="expireSoon">0</span></div>
        </div>
    </div>
    <div class="main-chart-container">
        <div class="chart-box">
            <div id="barChart"></div>
            <div id="pieChart"></div>
        </div>
    </div>
    <script>
        // 查询与统计
        function fetchAndRender(params) {
            $.ajax({
                url: '/WarehouseManagement/InventoryModel/GetList',
                method: 'GET',
                data: params,
                success: function (res) {
                    var data = Array.isArray(res.data) ? res.data : [];
                    // 统计
                    $('#totalQuantity').text(data.reduce((sum, x) => sum + (x.quantityInStock || 0), 0));
                    $('#materialTypes').text([...new Set(data.map(x => x.productMaterielName))].length);
                    $('#warehouseCount').text([...new Set(data.map(x => x.warehouseName))].length);
                    $('#expireSoon').text(data.filter(x => x.expireDays !== undefined && x.expireDays <= 7).length);
                    // 渲染图表
                    renderCharts(data);
                },
                error: function () {
                    layer && layer.msg ? layer.msg('获取库存数据失败', { icon: 2 }) : alert('获取库存数据失败');
                }
            });
        }

        // 图表渲染
        function renderCharts(data) {
            if (!Array.isArray(data)) {
                alert('库存数据格式异常！');
                return;
            }
            // 只显示前30个，防止过多溢出
            var sorted = data.slice().sort(function(a, b) { return b.quantityInStock - a.quantityInStock; });
            var topData = sorted.slice(0, 30);
            var names = topData.map(function (item) { return item.productMaterielName; });
            var values = topData.map(function (item) { return item.quantityInStock; });
            var pieData = topData.map(function (item) {
                return { name: item.productMaterielName, value: item.quantityInStock };
            });

            // 条形图
            var barChart = echarts.init(document.getElementById('barChart'));
            barChart.setOption({
                title: { text: '库存数量（前30）', left: 'center' },
                tooltip: { trigger: 'axis' },
                grid: { left: 60, right: 30, bottom: 60, top: 60 },
                xAxis: {
                    type: 'category',
                    data: names,
                    axisLabel: { rotate: 45, interval: 0, fontSize: 12 }
                },
                yAxis: { type: 'value', name: '数量' },
                series: [{
                    name: '库存数量',
                    type: 'bar',
                    data: values,
                    itemStyle: { color: '#1890ff' },
                    barMaxWidth: 30
                }]
            });

            // 饼图
            var pieChart = echarts.init(document.getElementById('pieChart'));
            pieChart.setOption({
                title: { text: '库存物料分布（前30）', left: 'center' },
                tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
                legend: { type: 'scroll', orient: 'vertical', right: 10, top: 40, bottom: 20 },
                series: [{
                    name: '库存物料',
                    type: 'pie',
                    radius: '70%',
                    center: ['50%', '55%'],
                    data: pieData,
                    label: {
                        formatter: '{b}: {c} ({d}%)',
                        fontSize: 12
                    }
                }]
            });
        }

        $(function () {
            fetchAndRender({});
        });
    </script>
</body>
</html>
